<template>
	<view class="popup">
		<u-popup v-model="uView.popup.show" mode="bottom" :mask-custom-style="{background: 'rgba(17, 17, 17, 0.4)'}"
			:safe-area-inset-bottom="true">
			<view class="wd-py-80r" style="background-color: #555;color:#fff">
				<view class="wd-px-60r">
					<view class="wd-py-40r" v-for="(item, index) in list" :key="index">
						<view class="wd-flex wd-items-center">
							<view class="wd-w-200r">
								{{ item.name }}
							</view>
							<view class="wd-flex-1">
								<u-slider v-model="item.value" min="0" max="100" @moving="onMoving(item)"></u-slider>
							</view>
							<view class="wd-w-120r wd-text-right">
								{{ item.value }}
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</u-popup>
	</view>
</template>

<script>
	import fabirc from 'fabric'
	export default {
		name: "filter-popup",
		props: {
			canvas: {
				type: Object,
			},
		},
		data() {
			return {
				activeObj: {},
				list: [
					{
						name: "模糊",
						key: "blur",
						type: "Blur",
						value: 0,
					},
					{
						name: "亮度",
						key: "brightness",
						type: "Brightness",
						value: 0,
					},
					{
						name: "对比度",
						key: "contrast",
						type: "Contrast",
						value: 0,
					},
					{
						name: "饱和度",
						key: "saturation",
						type: "Saturation",
						value: 0,
					}
				],
				uView: {
					popup: {
						show: false
					}
				}
			};
		},
		watch: {},
		methods: {
			//展示
			show() {
				this.uView.popup.show = true;
				this.activeObj = this.canvas.getActiveObject() || {};
				this.initFilters();
			},
			//关闭
			close() {
				this.uView.popup.show = false;
			},
			//初始化滤镜
			initFilters() {
				if (this.activeObj.filters.length == 0) {
					this.list.map(item => {
						let filterClass = fabric.Image.filters[item.type];
						if (filterClass) {
							let options = {};
							options[item.key] = item.value
							this.activeObj.filters.push(new filterClass(options));
						}
					})
				}
			},

			//移动
			onMoving(item) {
				this.activeObj.filters.map(filter =>{
					if(filter.type == item.type){
						filter[item.key] = parseFloat((item.value / 100).toFixed(2))
					}
				})
				this.activeObj.applyFilters();
				this.canvas.renderAll();
			}
		},
	}
</script>

<style>
	.popup {
	}
</style>